<div class="dialog-dam">
  <nz-tabset (nzSelectChange)="onSelectChange($event)">
    <nz-tab *ngFor="let item of tabs; let idx = index" [nzTitle]="item">
      <ng-container *ngIf="idx == 0">
        <div class="title">
          <span>闸前水位: {{ gateStatus.heightUp || '-' }} m</span>
          <span>闸后水位: {{ gateStatus.heightDown || '-' }} m</span>
          <span>流量: {{ gateStatus.flux || '-' }} m³/s</span>
        </div>
        <div class="diagram-gate" *ngIf="strobeNumber<4">
          <img
            class="gate-bg"
            [src]="'./assets/images/map/monitor/gate-bg' + strobeNumber + '.png'"
            alt=""
          />
          <div class="gate-wrap" [ngClass]="'gate-wrap' + strobeNumber">
            <div class="gate-box" *ngFor="let d of degreeList">
              <div
                class="gate"
                [style.height]="(100 - d / (gateHeight*10)) + '%'"
              ></div>
              <img
                *ngIf="!d"
                class="gate-dangban"
                src="./assets/images/map/monitor/dangban.png"
                alt=""
              />
              <img
                *ngIf="d"
                class="gate-dangban"
                src="./assets/images/map/monitor/dangban1.png"
                alt=""
              />
            </div>
          </div>
          <div class="water-box" [ngClass]="'water-box' + strobeNumber">
            <img [src]="'./assets/images/map/monitor/water' + strobeNumber + '.png'" alt="" />
            <div class="water" [ngClass]="'water' + strobeNumber"></div>
          </div>
        </div>
        <div class="status">
          <div class="s-title">闸门状态</div>
          <ul nz-row>
            <li
              nz-col
              nzSpan="12"
              *ngFor="let d of degreeList; let idx = index"
            >
              <span>{{ idx + 1 }}号闸门开度：</span>
              <span>{{ d || '-' }} mm</span>
            </li>
          </ul>
        </div>
      </ng-container>
      <ng-container *ngIf="idx == 1">
        <div class="title">
          <nz-range-picker
            nzFormat="yyyy-MM-dd"
            [nzPlaceHolder]="['开始时间', '结束时间']"
            ngModel
            (ngModelChange)="onChange($event)"
          ></nz-range-picker>
          <button nz-button nzType="primary" (click)="onQueryProcessList()">
            确定
          </button>
        </div>
        <div
          echarts
          [options]="processOpt"
          [merge]="processOptChange"
          style="height: 420px;"
        ></div>
      </ng-container>
      <ng-container *ngIf="idx == 2">
        <nz-table #dataTable
                  class="main-table"
                  [nzData]="equTableData"
                  [nzFrontPagination]="false"
                  nzBordered
                  nzSize="middle">
          <thead>
          <tr>
            <th>闸门名称</th>
            <th>闸门类型</th>
            <th>控制模式</th>
            <th>运行状态</th>
            <th>报警状态</th>
            <th>水位报警</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of equTableData; let idx = index;">
            <td>{{data.watergateCode}}</td>
            <td>{{data.controlType}}</td>
            <td>{{data.controlMode}}</td>
            <td>{{data.runstatus}}</td>
            <td>{{data.warnstatus}}</td>
            <td>{{data.waterwarn}}</td>
          </tr>
          </tbody>
        </nz-table>
      </ng-container>
      <ng-container *ngIf="idx == 3">
        <nz-table #dataTable
                  class="main-table"
                  [nzData]="warningTableData"
                  nzBordered
                  nzSize="middle">
          <thead>
          <tr>
            <th>序号</th>
            <th>闸门名称</th>
            <th>采集时间</th>
            <th>实测值</th>
            <th>限制</th>
            <th>预警类型</th>
            <th>预警处理</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of dataTable.data; let idx = index;">
            <td>{{idx + 1}}</td>
            <td>{{data.name}}</td>
            <td>{{data.time}}</td>
            <td>{{data.actual}}</td>
            <td>{{data.limit}}</td>
            <td>{{data.type}}</td>
            <td>{{data.operation}}</td>
          </tr>
          </tbody>
        </nz-table>
      </ng-container>
      <ng-container *ngIf="idx == 4">
        <!-- <ul class="dam-desc">
                    <li>
                        <span>测站名称</span>
                        <span></span>
                    </li>
                    <li>
                        <span>汛限水位</span>
                        <span></span>
                    </li>
                    <li>
                        <span>测站编号</span>
                        <span></span>
                    </li>
                    <li>
                        <span>历史最高水位</span>
                        <span></span>
                    </li>
                    <li>
                        <span>测站类型</span>
                        <span></span>
                    </li>
                    <li>
                        <span>历史最高水位出现时间</span>
                        <span></span>
                    </li>
                    <li>
                        <span>所属流域</span>
                        <span></span>
                    </li>
                    <li>
                        <span>历史最高流量</span>
                        <span></span>
                    </li>
                    <li>
                        <span>站址</span>
                        <span></span>
                    </li>
                    <li>
                        <span>历史最高流量出现时间</span>
                        <span></span>
                    </li>
                    <li>
                        <span>管理单位</span>
                        <span></span>
                    </li>
                    <li>
                        <span>经度</span>
                        <span></span>
                    </li>
                    <li>
                        <span>纬度</span>
                        <span></span>
                    </li>
                </ul> -->
      </ng-container>
    </nz-tab>
  </nz-tabset>
</div>
